<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>GSAP 颜色呼吸文字</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.14.0/gsap.min.js"></script>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #111;
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .breathing-text {
            font-size: 64px;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 0 0 0px #ff4081;
        }
    </style>
</head>
<body>
<h1 class="breathing-text">呼吸文字效果</h1>

<script>
    const text = document.querySelector(".breathing-text");

    gsap.to(text, {
        duration: 1.5,
        color: "#ff4081",
        textShadow: "0 0 20px #ff4081",
        repeat: -1,
        yoyo: true,
        ease: "power1.inOut"
    });
</script>
</body>
</html>
